<template>
  <div class="home-second-content">
    <div class="home-second-content-layout">
      <div class="home-second-content-layout-col">
        <a-menu
            mode="horizontal"
            :selectedKeys="secondSelectKeys"
            @click="runMenuClick"
        >
          <template v-if="componentChildren.children && componentChildren.children.length">
            <a-menu-item v-for="item in componentChildren.children" :key="item.id">
              {{ item.title }}
            </a-menu-item>
          </template>
        </a-menu>
        <run-table
            :children="secondChildren"
        />
      </div>
      <div class="home-second-content-layout-message">
        <Message
            :returnTimelineItem="returnTimelineItem"
        />
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import RunTable from "@/views/home/components/RunTable";
import Message from "@/views/home/components/Message";

export default {
  name: "Run",
  inject: {
    connectStore: {
      default: () => ({}),
    }
  },
  components: {
    RunTable,
    Message
  },
  data() {
    return {
      secondSelectKeys: [],
      secondChildren: {}
    }
  },
  mounted() {
    const {componentChildren} = this;
    this.secondChildren = _.head(componentChildren.children ? componentChildren.children : []);
    // this.secondSelectKeys = [_.head(componentChildren.children ? componentChildren.children : []).id]; 
    // table的selectKeys需要跳转
    this.secondSelectKeysJump(componentChildren)
  },
  methods: {
    async runMenuClick({key}) {
      await this.componentChildren.children && this.componentChildren.children.forEach((item) => {
        if (Number(item.id) === Number(key)) {
          this.secondChildren = item;
        }
      })
      this.secondSelectKeys = [key];
    },
    secondSelectKeysJump (obj) {
      if (obj.children) {
        for (const menu of obj.children) {
          if (menu.children && menu.children.length) {
            this.secondChildren = menu;
            this.secondSelectKeys = [menu.id];
            break;
          }
        } 
      }
    }
  },
  computed: {
    componentChildren() {
      return this.connectStore.value.componentChildren;
    },
    returnTimelineItem() {
      return this.connectStore.value.returnTimelineItem;
    }
  },
  watch: {
    componentChildren: {
      deep: true,
      handler:function(value) {
        this.secondSelectKeysJump(value)
      }
    }
  }

}
</script>

<style scoped lang="less">
.home-second-content-layout {
  display: flex;

  .home-second-content-layout-col {
    flex: 4;
    margin-right: 30px;
  }
}
</style>
